<template>
  <Card class="bomCard">
    <Col span="24" class="title">设备履历</Col>
    <div class="bom_box">
      <Row>
        <Col span="24">
        <div class="searchBox">
          <Form :model="formBox" label-position="top">
            <Row>
              <Col span="24">
                <Row>
                  <Col span="6" class="item_right">
                    <FormItem label="制造日期">
                      <Input v-model="dateParams.manufacturDate" disabled type="text" :placeholder="`${$t('common.selectInfo')}`"/>
                    </FormItem>
                  </Col>
                  <Col span="6" class="item_right">
                    <FormItem label="验收日期">
                      <Input v-model="dateParams.acceptDate" disabled type="text" :placeholder="`${$t('common.selectInfo')}`"/>
                    </FormItem>
                  </Col>
                  <Col span="6" class="item_right">
                    <FormItem label="转固日期">
                      <Input v-model="dateParams.toRegularDate" disabled type="text" :placeholder="`${$t('common.selectInfo')}`"/>
                    </FormItem>
                  </Col>
                  <!-- <Col span="6" class="item_right">
                    <FormItem label="报废日期">
                      <Input v-model="dateParams.scrapData" disabled type="text" :placeholder="`${$t('common.selectInfo')}`"/>
                    </FormItem>
                  </Col> -->
                </Row>
              </Col>
              <Col span="24">
                <div class="tabBox">
                  <Tabs  @on-click="tabClick">
                    <TabPane label="维护" name="维护">
                      <Table :columns="columns" :data="tableData" stripe ></Table>
                    </TabPane>
                    <TabPane label="维修" name="维修">
                      <Table :columns="columns" :data="tableData" stripe ></Table>
                    </TabPane>
                    <!-- <TabPane label="使用" name="使用">
                      <Table :columns="columns" :data="tableData" stripe ></Table>
                    </TabPane> -->
                  </Tabs>
                </div>
              </Col>
            </Row>
          </Form>
        </div>
        </Col>
      </Row>
    </div>
  </Card>
</template>

<script>
export default {
  name: "bomComponent",
  props: ['dateParams'],
  data() {
    return{
      taskLevelList:[
        {
          label:'一级保养',
          value:1
        },
        {
          label:'二级保养',
          value:2
        },
        {
          label:'三级保养',
          value:3
        },
      ],
      columns:[],
      columns1: [
        {
          title: '日期',
          key: 'createTime'
        },
        {
          title: '维保单号',
          key: 'taskNo'
        },
        {
          title: '维保级别',
          key: 'taskLevel',
          render: (h, params) => {
            return h('div', [
              h('span', {}, this.taskLevelList.find(val => val.value === params.row.taskLevel).label)
            ])
          }
        },
        {
          title: '维保人',
          key: 'operName'
        },
        {
          title: '维护工时(min)',
          key: 'taskTime'
        }/*,
        {
          title: '状态',
          key: 'ad'
        },*/
        // {
        //   title: '计划名称',
        //   key: 'orderNo'
        // },
        // {
        //   title: '操作记录',
        //   key: 'archivesTypeStr'
        // },
      ],
      columns3: [
        {
          title: '日期',
          key: 'createTime'
        },
        {
          title: '维修单号',
          key: 'workOrderNo'
        },
        {
          title: '故障现象',
          key: 'faultMessage'
        },
        {
          title: '维修人',
          key: 'receiveOrderName'
        },
        {
          title: '维修工时(min)',
          key: 'maintainTime'
        }/*,
        {
          title: '状态',
          key: 'ad'
        },*/
        // {
        //   title: '操作记录',
        //   key: 'archivesTypeStr'
        // },
      ],
      columns2: [
        {
          title: '日期',
          key: 'archivesDate'
        },
        {
          title: '记录单号',
          key: 'orderNo'
        },
        {
          title: '信息内容',
          key: 'archivesTypeStr'
        },
        {
          title: '记录人',
          key: 'maintenanceBy'
        }
      ],
      tableData: [],
      formBox:{}
    }
  },
  mounted() {
    console.log('--------');
    console.log(this.dateParams);
    console.log('--------');
       this.tabClick('维护')
  },
  methods:{
    tabClick(val){
      let archivesTypes = []
      let orderBy;
      switch (val) {
        case '维护':
          this.columns = this.columns1
          archivesTypes = [8]
          orderBy='DESC'
              break;
        case '维修':
          orderBy='DESC'
          this.columns = this.columns3
          archivesTypes = [9]
            break;
        case '使用':
          orderBy='ASC'
          this.columns = this.columns2
          archivesTypes = [1,2,3,4,5,6,7]
          break;
      }
      this.getDataList(archivesTypes,orderBy,val)
    },
    getDataList(archivesTypes,orderBy,type) {
      let url=type=='维护'?'/dms/deviceMaintainTask/queryDevMaintainTaskList':'/dms/deviceMaintenanceWorkOrder/queryDevMaintWorkOrderList'
      this.axios({
        method: 'post',
        url,
        data: {
          pageNum:1,
          pageNo:1,
          pageSize:10,
          deviceNo: this.$route.query.deviceNo,
          // orderBy,
          // archivesTypes
        }
      }).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.list
        } else {
          this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.bomCard{
  height: calc(100vh - 160px);
  .bom_box{
    .searchBox{
      .tabBox{
        padding: 0 10px;
        margin-top: 10px;
        ::v-deep .ivu-tabs-bar{
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
      }
      ::v-deep .ivu-form .ivu-form-item-label{
        padding: 0 0 5px 0 !important;
      }
      .item_right{
        padding: 0 10px;
        .ivu-form-item{
          margin-bottom: 15px;
        }
      }
    }
  }
  .title{
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
  }
}
</style>
